<template>
  <div class="box">
    <div class="header">
      <van-nav-bar
        title="个人设置"
        right-text="保存"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="Save"
      />
    </div>
    <div class="content">
      <div class="pic">
        <van-uploader :after-read="afterRead" oversize="oversize">
          <van-image
          round
            width="80"
            height="80"
            :src='avatar'
          />
        </van-uploader>
      </div>
      <van-form @submit="Save">
        <van-field v-model="nickname" label="昵称" />
        <van-field name="radio" label="性别">
         <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group>
         </template>
        </van-field>
        <van-field v-model="date" label="出生日期" />
        <van-field label="手机号码"  readonly v-model="tel"/>
      </van-form>
      <van-button @click="admin">地址管理
        <van-icon name="arrow" style="float:right;position:relative;top:.15rem;"/>
      </van-button>
      <van-button style="text-align:left;" @click="exit">退出当前账户</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Toast, RadioGroup, Radio, DatetimePicker, Dialog, Button, Icon, Uploader, Image } from 'vant'
import { getuserinfo, updateinfo, updateavatar } from '@/api'
import store from '@/store'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Toast)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(DatetimePicker)
Vue.use(Dialog)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Uploader)
Vue.use(Image)
export default {
  data () {
    return {
      nickname: '',
      sex: '',
      date: '',
      avatar: '',
      tel: ''
    }
  },
  mounted () {
    getuserinfo({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.code === '1908110') {
        this.$router.push('/login')
      } else {
        this.nickname = res.data.data.nickname
        this.avatar = res.data.data.avatar
        this.tel = res.data.data.tel
        this.sex = res.data.data.sex
        this.date = res.data.data.date
      }
    })
  },
  methods: {
    Save () {
      updateinfo({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token'),
        nickname: this.nickname,
        sex: this.sex,
        date: this.date
      }).then(res => {
        if (res.data.code === '1908110') {
          this.$router.replace('/login')
        } else {
          console.log(this.sex)
          Toast('已成功保存')
          // this.$router.go(-1)
        }
      })
    },
    exit () {
      Dialog.confirm({
        title: '是否退出登录'
      }).then(() => {
      // on confirm
        console.log(store.state.users.login_state)
        store.state.users.login_state = false
        this.$router.replace('/login')
      }).catch(() => {
      // on cancel
      })
    },
    // 跳转到地址管理
    admin () {
      this.$router.push('/Addresslist')
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      updateavatar({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token'),
        avatar: file.content
      }).then(res => {
        if (res.data.code === '1908110') {
          console.log('更改失败')
        } else {
          this.avatar = file.content
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
   background-image: linear-gradient(-90deg,#37ddc7,#3cd8e2 50%,#40d3fd),linear-gradient(#01a8f4,#01a8f4);
}
.van-field {
  border-bottom: .01rem solid #e5e5e5;
}
.van-button {
  border:none;
  border-bottom: .01rem solid #e5e5e5;
  width:100%;
  text-align:left;
}
.pic {
  display: flex;
  justify-content: center;
  height: 1rem;
  margin-top: .1rem;
  border-bottom: .1rem solid #f5f5f5;
}
</style>

<style>
.van-nav-bar .van-nav-bar__title, .van-nav-bar .van-nav-bar__left .van-nav-bar__arrow {
  color: white;
}
</style>
